<template>
  <div data-v-656e54e5="" class="group-buy">
    <!-- 第一种头部 -->
    <div
      data-v-656e54e5=""
      class="classify-header"
      style="top: 0px"
      v-if="isShow"
    >
      <div data-v-656e54e5="" class="search-box">
        <router-link data-v-656e54e5="" tag="div" to="/search">
          <img
            data-v-656e54e5=""
            src="https://images.yaodouwang.com/img/common/search.png"
            alt="搜索图标"
          />
          <span data-v-656e54e5=""> 搜索药神卡专区内商品 </span>
        </router-link>
      </div>
      <div
        data-v-656e54e5=""
        class="sort-btn color-333 font-px26"
        v-if="goodId != 0"
      >
        <div
          @click="handleRank(0)"
          data-v-656e54e5=""
          :class="{ 'sort-btn-active': rankActiveNum == 0 }"
        >
          默认
        </div>
        <div
          @click="handleRank(1)"
          data-v-656e54e5=""
          :class="{ 'sort-btn-active': rankActiveNum == 1 }"
        >
          销量
        </div>
        <div
          @click="handleRank(2)"
          data-v-656e54e5=""
          :class="{ 'sort-btn-active': rankActiveNum == 2 }"
        >
          <div data-v-656e54e5="" class="sort-btn-price">
            <div data-v-656e54e5="">价格</div>
            <div data-v-656e54e5="" class="sort-btn-sanjiao">
              <i
                data-v-656e54e5=""
                :class="[
                  'iconfont',
                  'icon-sanjiaoshang',
                  { 'price-active': pricecount && rankActiveNum == 2 },
                ]"
              ></i>
              <i
                data-v-656e54e5=""
                :class="[
                  'iconfont',
                  'icon-sanjiaoxia',
                  { 'price-active': !pricecount && rankActiveNum == 2 },
                ]"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <!---->
      <div data-v-656e54e5="" class="classify-tab" style="opacity: 1">
        <!---->
        <div data-v-656e54e5="" class="scroll-tab">
          <div data-v-5942b3b4="" data-v-656e54e5="" class="scroll-menu">
            <div data-v-5942b3b4="" class="menu-list">
              <div
                data-v-5942b3b4=""
                :class="[
                  'menu-item',
                  'menu-item-four',
                  { 'menu-item-active': goodId == 0 },
                ]"
                @click="goodId = 0"
              >
                <span data-v-5942b3b4="" class="icon"
                  ><img
                    data-v-5942b3b4=""
                    :src="
                      goodId == 0
                        ? ''
                        : ''
                    "
                    alt=""
                /></span>
              </div>
              <div v-for="classify in topNavList" :key="classify.id">
                <div
                  data-v-5942b3b4=""
                  v-for="good in classify.children"
                  :key="good.id"
                  :class="[
                    'menu-item',
                    'menu-item-four',
                    { 'menu-item-active': goodId == good.id },
                  ]"
                  @click="handleGetClassify(good.id, 0)"
                >
                  <span data-v-5942b3b4="">{{ good.text }}</span>
                </div>
              </div>

              <!---->
            </div>
          </div>
        </div>
        <div data-v-656e54e5="" class="classify-more" @click="isShow = !isShow">
          <!---->
          <i data-v-656e54e5="" class="ydwiconfont iconfenlei-xiala"></i>
        </div>
      </div>
      <!---->
    </div>
    <!-- 第二种头部 -->
    <div data-v-656e54e5="" class="classify-header" style="top: 0px" v-else>
      <!---->
      <!---->
      <div data-v-656e54e5="" class="classify-tab" style="opacity: 1">
        <div data-v-656e54e5="" class="classify-all-title">请选择分类</div>
        <!---->
        <div data-v-656e54e5="" class="classify-more" @click="isShow = !isShow">
          <i data-v-656e54e5="" class="ydwiconfont iconfenlei-xialazhehui"></i>
          <!---->
        </div>
      </div>
      <div data-v-656e54e5="" class="classify-all-box" style="top: 0px">
        <div data-v-656e54e5="" class="classify-all">
          <div
            @click="handlegetMedList"
            data-v-656e54e5=""
            class="classify-all_item classify-popular active-all-item"
          >
            <img data-v-656e54e5="" src="../assets/img/heartred.png" alt="" />
          </div>
          <div
            data-v-656e54e5=""
            class="classify-all_content"
            v-for="clssifylv1 in topNavList"
            :key="clssifylv1.id"
          >
            <div data-v-656e54e5="" class="classify-title">
              {{ clssifylv1.text }}
            </div>
            <div data-v-656e54e5="" class="classify-each">
              <div
                data-v-656e54e5=""
                class="classify-all_item"
                v-for="clssifylv2 in clssifylv1.children"
                :key="clssifylv2.id"
                @click="handleGetClassify(clssifylv2.id, 1)"
              >
                {{ clssifylv2.text }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div data-v-656e54e5="" class="mescroll mescroll-bar" style="top: 0px">
      <div
        data-v-656e54e5=""
        class="div-adv"
        :style="{ 'padding-top': goodId == 0 ? '194px' : '284px' }"
      >
        <img
          data-v-656e54e5=""
          :src="banner"
          alt=""
          style="width: 689px; height: 220px; border-radius: 25px"
        />
      </div>

      <!-- 这里是点击桃心出现的列表 -->
      <van-list
        v-if="goodId == 0"
        v-model="loading"
        :finished="finished"
        finished-text=""
        @load="onLoad"
        class="groupBuy-list"
      >
        <div
          @click="linkToDetail(good.productId)"
          data-v-c63fad28=""
          data-v-656e54e5=""
          class="product-list_item"
          :stocknumber="good.kc"
          v-for="(good, index) in productsList"
          :key="good.productId + good.kc + index"
        >
          <div data-v-c63fad28="" class="product-img">
            <!-- 是否跨境的图片 -->
            <img
              v-if="good.labels.foreignTrade == 'Y'"
              data-v-c63fad28=""
              src="../assets/img/kuajingshangping.png"
              alt=""
              class="cross-borde-icon"
            />
            <!---->
            <img
              data-v-c63fad28=""
              alt="商品图片"
              :data-src="good.imageUrl"
              :src="good.imageUrl"
              lazy="loaded"
            />
            <div
              data-v-c63fad28=""
              class="cross-borde-country"
              v-if="good.labels.foreignTrade == 'Y'"
            >
              <!-- 国旗图片 -->
              <img data-v-c63fad28="" :src="good.labels.logo" alt="" />
              <span data-v-c63fad28="" class="country">{{
                good.labels.country
              }}</span>
            </div>
          </div>
          <div data-v-c63fad28="" class="product-info">
            <div
              data-v-c63fad28=""
              class="product-name txt-cut color-333 font-px26"
            >
              <span data-v-c63fad28="">{{ good.productName }}</span>
            </div>
            <div data-v-c63fad28="" class="product-store">
              <span
                data-v-c63fad28=""
                class="font-px24 color-999 vertical-middle one-txt-cut"
                >{{ good.merchantInfo.merchantName }}</span
              >
              <!-- 这里是大于符号图片 -->
              <img
                data-v-c63fad28=""
                src=""
                alt=""
                class="vertical-middle"
              />
            </div>
            <div data-v-c63fad28="" class="product-tag">
              <!---->
              <!---->
              <div
                data-v-c63fad28=""
                class="quan"
                v-if="good.labels.quan == 'Y'"
              >
                <img
                  data-v-c63fad28=""
                  src="https://images.yaodouwang.com/img/home/tag_coupon.png"
                  alt="券"
                />
              </div>
              <div
                data-v-c63fad28=""
                alt="券"
                class="pt-icon"
                v-if="good.labels.isGroup == 'Y'"
              >
                拼团
              </div>
              <!---->
              <!---->
            </div>
            <div data-v-c63fad28="" class="product-price">
              <div data-v-c63fad28="" class="product-price-left">
                <div
                  data-v-d4462b7e=""
                  data-v-c63fad28=""
                  class="money_show"
                  fontcolor="#FF7900"
                >
                  <span data-v-d4462b7e="" class="now_money"
                    ><span data-v-d4462b7e=""
                      ><span data-v-d4462b7e="" class="font-px28">¥</span
                      ><span data-v-d4462b7e="" class="font-px38"
                        >{{ parseInt(good.price)
                        }}<span data-v-d4462b7e="" class="font-px26"
                          >.{{ handlePrice(good.price) }}</span
                        ></span
                      ></span
                    ></span
                  >
                </div>
              </div>
              <div
                data-v-cdd5d3c4=""
                data-v-c63fad28=""
                class="cart-icon"
                @click.stop="handleCartAdd(good)"
              >
                <img
                  v-if="good.labels.isGroup == 'N'"
                  data-v-cdd5d3c4=""
                  src=""
                  alt="加购物车"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="productsList.length % 2 == 1"
          data-v-c63fad28=""
          data-v-656e54e5=""
          class="product-list_item"
          style="background: #f8f8f8"
        ></div>
      </van-list>

      <!-- 这里是点击其他,并且有数据时出现的列表 -->
      <van-list
        v-if="goodId != 0 && classifyList.length > 0"
        v-model="loading"
        :finished="finished"
        finished-text=""
        @load="onLoad"
        class="groupBuy-list"
      >
        <div
          @click="linkToDetail(good.productId)"
          data-v-c63fad28=""
          data-v-656e54e5=""
          class="product-list_item"
          :stocknumber="good.kc"
          v-for="(good, index) in classifyList"
          :key="good.productId + good.kc + index"
        >
          <div data-v-c63fad28="" class="product-img">
            <!-- 是否跨境的图片 -->
            <img
              v-if="good.labels.foreignTrade == 'Y'"
              data-v-c63fad28=""
              src="../assets/img/kuajingshangping.png"
              alt=""
              class="cross-borde-icon"
            />
            <!---->
            <img
              data-v-c63fad28=""
              alt="商品图片"
              :data-src="good.imageUrl"
              :src="good.imageUrl"
              lazy="loaded"
            />
            <div
              data-v-c63fad28=""
              class="cross-borde-country"
              v-if="good.labels.foreignTrade == 'Y'"
            >
              <!-- 国旗图片 -->
              <img data-v-c63fad28="" :src="good.labels.logo" alt="" />
              <span data-v-c63fad28="" class="country">{{
                good.labels.country
              }}</span>
            </div>
          </div>
          <div data-v-c63fad28="" class="product-info">
            <div
              data-v-c63fad28=""
              class="product-name txt-cut color-333 font-px26"
            >
              <span data-v-c63fad28="">{{ good.productName }}</span>
            </div>
            <div data-v-c63fad28="" class="product-store">
              <span
                data-v-c63fad28=""
                class="font-px24 color-999 vertical-middle one-txt-cut"
                >{{ good.merchantName }}</span
              >
              <!-- 这里是大于符号图片 -->
              <img
                data-v-c63fad28=""
                src=""
                alt=""
                class="vertical-middle"
              />
            </div>
            <div data-v-c63fad28="" class="product-tag">
              <!---->
              <!---->
              <div
                data-v-c63fad28=""
                class="quan"
                v-if="good.labels.quan == 'Y'"
              >
                <img
                  data-v-c63fad28=""
                  src="https://images.yaodouwang.com/img/home/tag_coupon.png"
                  alt="券"
                />
              </div>
              <div
                data-v-c63fad28=""
                alt="券"
                class="pt-icon"
                v-if="good.labels.isGroup == 'Y'"
              >
                拼团
              </div>
              <!---->
              <!---->
            </div>
            <div data-v-c63fad28="" class="product-price">
              <div data-v-c63fad28="" class="product-price-left">
                <div
                  data-v-d4462b7e=""
                  data-v-c63fad28=""
                  class="money_show"
                  fontcolor="#FF7900"
                >
                  <span data-v-d4462b7e="" class="now_money"
                    ><span data-v-d4462b7e=""
                      ><span data-v-d4462b7e="" class="font-px28">¥</span
                      ><span data-v-d4462b7e="" class="font-px38"
                        >{{ parseInt(good.price)
                        }}<span data-v-d4462b7e="" class="font-px26"
                          >.{{ handlePrice(good.price) }}</span
                        ></span
                      ></span
                    ></span
                  >
                </div>
              </div>
              <div
                data-v-cdd5d3c4=""
                data-v-c63fad28=""
                class="cart-icon"
                @click.stop="handleCartAdd(good)"
              >
                <img
                  v-if="good.labels.isGroup == 'N'"
                  data-v-cdd5d3c4=""
                  src=""
                  alt="加购物车"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="classifyList.length % 2 == 1"
          data-v-c63fad28=""
          data-v-656e54e5=""
          class="product-list_item"
          style="background: #f8f8f8"
        ></div>
      </van-list>

      <div data-v-656e54e5="" class="viewMore"></div>
      <div
        class="mescroll-upwarp"
        style="visibility: visible; display: block"
        v-if="finished"
      >
        <p class="upwarp-tip">——— 已经到底了———</p>
      </div>
      <div class="foot"></div>
    </div>
    <!-- 暂未上架商品 -->
    <div data-v-656e54e5="" class="product-blank" v-if="!havegood">
      <img
        data-v-656e54e5=""
        src="https://images.yaodouwang.com/img/blankpage/yskArea-blank.png"
        alt=""
        class="default_img"
      />
      <p data-v-656e54e5="" class="empty-word">暂未上架商品，去看看其他的吧~</p>
    </div>
    <!---->
    <router-link data-v-656e54e5="" class="shopCart" tag="div" to="/cart">
      <div data-v-656e54e5="" class="shopCart-btn">
        <i data-v-656e54e5="" class="ydwiconfont iconxiangqingye-gouwuche"></i>
        <div data-v-656e54e5="">购物车</div>
      </div>
      <div
        data-v-3f9a8470=""
        class="shopCart-num1"
        v-if="countTotal.countQuantity > 0"
      >
        {{ countTotal.countQuantity }}
      </div>
    </router-link>
  </div>
</template>
<script>
import {
  getMedList,
  topNavList,
  bannerList,
  categoryList,
  categoryRankList,
  cartAdd,
} from "../api/pjmedicinecard"; //这里是解构赋值
import { ownCartList } from "../api/pjmedicinecart";
export default {
  data() {
    return {
      value: "",
      i: 0,
      isShow: true, //这里是控制头部的
      // isUp:true
      topNavList: [],
      banner: [],
      productsList: [],
      page: 2,
      loading: false,
      finished: false,
      goodId: 0,
      havegood: true, //是否有上架商品
      classifyList: [], //点击分类后的数据
      rankActiveNum: 0, //默认/销量/价格的激活效果
      pricecount: false, //价格的点击--true低到高  false高到低
      categoryId: 0, //商品的分类id
    };
  },
  computed: {
    countTotal() {
      //总计
      return this.$store.getters["pjcart/countTotal"];
    },
  },
  methods: {
    handlePrice(price) {
      price = price * 100;
      price = parseInt(price) + "";
      price = price.slice(-2);
      return price;
    },
    handleGetClassify(categoryId, num) {
      // num为0是桃心  为1是其他的分类
      this.goodId = categoryId;
      this.rankActiveNum = 0;
      if (num == 1) {
        this.isShow = !this.isShow;
      }
      if (categoryId != 0) {
        this.categoryId = categoryId;
        categoryList(categoryId).then((res) => {
          this.classifyList = res.data.data.products;
          if (this.classifyList.length) {
            this.havegood = true;
          } else {
            this.havegood = false;
          }
        });
      }
    },
    handlegetMedList() {
      this.goodId = 0;
      this.isShow = !this.isShow;
    },
    onLoad() {
      // 异步更新数据
      getMedList(this.page).then((res) => {
        let productsList = res.data.data.products;
        if (productsList.length) {
          this.productsList = [...this.productsList, ...productsList];
          this.page++;
        } else {
          this.finished = true; //没有更多数据了
        }
        this.loading = false;
      });
    },
    handleRank(rankLV1) {
      //点击默认/销量/价格的排序
      this.rankActiveNum = rankLV1;
      if (rankLV1 == 2) {
        //点击的价格
        this.pricecount = !this.pricecount;
        let isAscending = this.pricecount ? "N" : "Y"; //赋值价格的排序方式  N:低到高
        let categoryId = this.categoryId;
        categoryRankList({ categoryId, isAscending }).then((res) => {
          this.classifyList = res.data.data.products;
          if (this.classifyList.length) {
            this.havegood = true;
          } else {
            this.havegood = false;
          }
        });
      } else {
        categoryList(this.categoryId).then((res) => {
          this.classifyList = res.data.data.products;
          if (this.classifyList.length) {
            this.havegood = true;
          } else {
            this.havegood = false;
          }
        });
      }
    },
    handleCartAdd(good) {
      //商品加入购物车
      if (this.$store.state.zlstore.userinfo) {
        let productObj = {
          cartAddVos: [{ productId: good.productId, quantity: 1 }],
          isBuy: false,
        };
        cartAdd(productObj).then((res) => {
          ownCartList().then((res) => {
            this.$toast.success("已加入购物车成功");
            //发起请求购物车里面的商品列表
            if(res.data.supplierList){
              var supplierList = res.data.supplierList;
            }
            this.$store.commit("pjcart/initSupplierList", supplierList);
          });
        });
      }else {
        this.$toast.fail("请登录");
      }
    },
    linkToDetail(id) {
      //点击去详情页
      this.$router.push("/children/detail/" + id);
    },
  },
  created() {
    topNavList().then((res) => {
      this.topNavList = res.data.data;
    });
    bannerList().then((res) => {
      this.banner = res.data.data.imageUrl;
    });
    getMedList(1).then((res) => {
      this.productsList = res.data.data.products;
    });
  },
  mounted() {},
  watch: {
    $route: function (to, from) {
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

<style lang="less" scoped>
.product-img {
  width: 350px;
  height: 350px;
  position: relative;
}
.groupBuy-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.foot {
  height: 100px;
}
</style>